import 'package:flui/flui.dart';
import 'package:flutter/material.dart';
import 'package:flutter_fai_webview/flutter_fai_webview.dart';

import 'package:flutter_swiper/flutter_swiper.dart';
import 'package:fzcgx_app/common/adapter_utils.dart';
import 'package:fzcgx_app/common/assets_utils.dart';
import 'package:fzcgx_app/provider/provider_widget.dart';
import 'package:fzcgx_app/router/routes.dart';
import 'package:fzcgx_app/ui/base/base_view_model.dart';
import 'package:fzcgx_app/ui/order/view_model/order_detail_view_model.dart';
import 'package:fzcgx_app/ui/widget/custom_appbar_widget.dart';
import 'package:fzcgx_app/ui/widget/empty_widget.dart';
import 'package:fzcgx_app/ui/widget/my_underline_indicator.dart';

// ignore: must_be_immutable
class OrderDetailPage extends StatefulWidget {
  String id;
  OrderDetailPage({Key key, this.id}) : super(key: key);

  @override
  _OrderDetailPageState createState() => _OrderDetailPageState();
}

class _OrderDetailPageState extends State<OrderDetailPage>
    with SingleTickerProviderStateMixin {
  TabController controller;

  @override
  void initState() {
    controller = TabController(initialIndex: 0, length: 4, vsync: this);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return ProviderWidget<OrderDetailViewModel>(
      model: OrderDetailViewModel(controller),
      onReady: (viewModel) {
        viewModel.requestApi(widget.id);
      },
      builder: (context, viewModel, child) {
        return Scaffold(
          backgroundColor: Color(0xffF6F6F7),
          appBar: viewModel.isExpanded
              ? CustomAppbar(
                  backgroundColor: Color(0xffF5F5F5),
                  leading: InkWell(
                    onTap: () {
                      Routes.goBack(context);
                    },
                    child: Container(
                      // padding: EdgeInsets.symmetric(
                      //     horizontal: AdapterUtils.getWidth(15)),
                      child: Image.asset(
                          AssetsUtils.getAssetsImagesPath('back_black.png')),
                    ),
                  ),
                  actions: <Widget>[
                    InkWell(
                      child: Container(
                        // padding: EdgeInsets.symmetric(
                        //     horizontal: AdapterUtils.getWidth(15)),
                        child: Image.asset(AssetsUtils.getAssetsImagesPath(
                            'zhuanfa_black.png')),
                      ),
                    )
                  ],
                  title: '订单详情',
                )
              : null,
          body: viewModel.state == ViewState.Success
              ? _buildSuccessWidget(viewModel)
              : Container(),
          bottomNavigationBar: BottomAppBar(
            child: Container(
              color: Colors.white,
              height: AdapterUtils.getHeight(72),
              padding: EdgeInsets.symmetric(
                horizontal: AdapterUtils.getWidth(15),
              ),
              child: Row(
                children: <Widget>[
                  Expanded(
                      flex: 1,
                      child: Container(
                        height: AdapterUtils.getHeight(52),
                        alignment: Alignment.center,
                        decoration: BoxDecoration(
                            color: Color(0xffFF7F3D),
                            borderRadius: BorderRadius.only(
                                topLeft: Radius.circular(26),
                                bottomLeft: Radius.circular(26))),
                        child: Text('加入收藏',
                            style: TextStyle(
                                color: Colors.white,
                                fontWeight: FontWeight.bold,
                                fontSize: AdapterUtils.getSp(18))),
                      )),
                  Expanded(
                      flex: 2,
                      child: InkWell(
                        onTap: () {
                          viewModel.onQiangDan(context);
                        },
                        child: Container(
                          height: AdapterUtils.getHeight(52),
                          alignment: Alignment.center,
                          decoration: BoxDecoration(
                              color: Color(0xffFF3D3E),
                              borderRadius: BorderRadius.only(
                                  topRight: Radius.circular(26),
                                  bottomRight: Radius.circular(26))),
                          child: Text('我要抢单',
                              style: TextStyle(
                                  color: Colors.white,
                                  fontWeight: FontWeight.bold,
                                  fontSize: AdapterUtils.getSp(18))),
                        ),
                      )),
                ],
              ),
            ),
          ),
        );
      },
    );
  }

  Widget _buildSuccessWidget(OrderDetailViewModel viewModel) {
    return Stack(
      children: <Widget>[
        SingleChildScrollView(
          controller: viewModel.controller,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Container(
                height: AdapterUtils.getHeight(374),
                width: AdapterUtils.screenWidth(),
                color: Colors.transparent,
                child: Swiper(
                  itemCount: viewModel.model.imgs.length,
                  autoplay: true,
                  pagination: SwiperCustomPagination(builder:
                      (BuildContext context, SwiperPluginConfig config) {
                    return Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children:
                          _buildPaginationWidget(viewModel, config.activeIndex),
                    );
                  }),
                  itemBuilder: (BuildContext context, int index) {
                    return Image.network(
                      viewModel.model.imgs[index],
                      fit: BoxFit.cover,
                    );
                  },
                ),
              ),
              SizedBox(height: AdapterUtils.getHeight(20)),
              Container(
                color: Colors.white,
                padding:
                    EdgeInsets.symmetric(horizontal: AdapterUtils.getWidth(15)),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text(viewModel.model.proName,
                        style: TextStyle(
                            color: Color(0xff141F33),
                            fontWeight: FontWeight.bold,
                            fontSize: AdapterUtils.getSp(16))),
                    SizedBox(height: AdapterUtils.getHeight(30)),
                    Container(
                      child: Row(
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: <Widget>[
                          RichText(
                            text: TextSpan(children: <InlineSpan>[
                              TextSpan(
                                text: '所需加工费：',
                                style: TextStyle(
                                  fontSize: AdapterUtils.getSp(12),
                                  color: Color(0xff606B79),
                                  fontWeight: FontWeight.w500,
                                ),
                              ),
                              TextSpan(
                                text: '${viewModel.model.price} ',
                                style: TextStyle(
                                  fontSize: AdapterUtils.getSp(24),
                                  color: Color(0xffFF3D3E),
                                  fontWeight: FontWeight.w900,
                                ),
                              ),
                              TextSpan(
                                text: '元',
                                style: TextStyle(
                                  fontSize: AdapterUtils.getSp(12),
                                  color: Color(0xff606B79),
                                  fontWeight: FontWeight.w500,
                                ),
                              ),
                            ]),
                          ),
                          Spacer(),
                          Image.asset(
                              AssetsUtils.getAssetsImagesPath('juli.png')),
                          SizedBox(
                            width: AdapterUtils.getWidth(3),
                          ),
                          Text(viewModel.model.distance,
                              style: TextStyle(
                                  color: Color(0xff99A2AD),
                                  fontWeight: FontWeight.w500,
                                  fontSize: AdapterUtils.getSp(11))),
                        ],
                      ),
                    ),
                    SizedBox(height: AdapterUtils.getHeight(8)),
                  ],
                ),
              ),
              SizedBox(height: AdapterUtils.getHeight(10)),
              Container(
                color: Colors.white,
                padding: EdgeInsets.symmetric(
                    horizontal: AdapterUtils.getWidth(15),
                    vertical: AdapterUtils.getHeight(12)),
                child: Column(
                  children: <Widget>[
                    Row(
                      children: <Widget>[
                        RichText(
                          text: TextSpan(children: <InlineSpan>[
                            TextSpan(
                              text: '款号：',
                              style: TextStyle(
                                fontSize: AdapterUtils.getSp(12),
                                color: Color(0xff99A2AD),
                                fontWeight: FontWeight.w500,
                              ),
                            ),
                            TextSpan(
                              text: viewModel.model.styleNo.isEmpty
                                  ? '暂无款号'
                                  : viewModel.model.styleNo,
                              style: TextStyle(
                                fontSize: AdapterUtils.getSp(12),
                                color: Color(0xff606B79),
                                fontWeight: FontWeight.w500,
                              ),
                            ),
                          ]),
                        ),
                        SizedBox(
                          width: AdapterUtils.getWidth(70),
                        ),
                        RichText(
                          text: TextSpan(children: <InlineSpan>[
                            TextSpan(
                              text: '款式名称：',
                              style: TextStyle(
                                fontSize: AdapterUtils.getSp(12),
                                color: Color(0xff99A2AD),
                                fontWeight: FontWeight.w500,
                              ),
                            ),
                            TextSpan(
                              text: viewModel.model.proStyle,
                              style: TextStyle(
                                fontSize: AdapterUtils.getSp(12),
                                color: Color(0xff606B79),
                                fontWeight: FontWeight.w500,
                              ),
                            ),
                          ]),
                        ),
                      ],
                    ),
                    SizedBox(height: AdapterUtils.getHeight(10)),
                    Row(
                      children: <Widget>[
                        RichText(
                          text: TextSpan(children: <InlineSpan>[
                            TextSpan(
                              text: '数量（件）：',
                              style: TextStyle(
                                fontSize: AdapterUtils.getSp(12),
                                color: Color(0xff99A2AD),
                                fontWeight: FontWeight.w500,
                              ),
                            ),
                            TextSpan(
                              text: viewModel.model.num,
                              style: TextStyle(
                                fontSize: AdapterUtils.getSp(12),
                                color: Color(0xff606B79),
                                fontWeight: FontWeight.w500,
                              ),
                            ),
                          ]),
                        ),
                        SizedBox(
                          width: AdapterUtils.getWidth(70),
                        ),
                        RichText(
                          text: TextSpan(children: <InlineSpan>[
                            TextSpan(
                              text: '订单类型：',
                              style: TextStyle(
                                fontSize: AdapterUtils.getSp(12),
                                color: Color(0xff99A2AD),
                                fontWeight: FontWeight.w500,
                              ),
                            ),
                            TextSpan(
                              text: viewModel.model.robName,
                              style: TextStyle(
                                fontSize: AdapterUtils.getSp(12),
                                color: Color(0xff606B79),
                                fontWeight: FontWeight.w500,
                              ),
                            ),
                          ]),
                        ),
                      ],
                    ),
                    SizedBox(height: AdapterUtils.getHeight(10)),
                    Row(
                      children: <Widget>[
                        RichText(
                          text: TextSpan(children: <InlineSpan>[
                            TextSpan(
                              text: '交货期：',
                              style: TextStyle(
                                fontSize: AdapterUtils.getSp(12),
                                color: Color(0xff99A2AD),
                                fontWeight: FontWeight.w500,
                              ),
                            ),
                            TextSpan(
                              text: viewModel.model.endTime,
                              style: TextStyle(
                                fontSize: AdapterUtils.getSp(12),
                                color: Color(0xffFF3D3E),
                                fontWeight: FontWeight.w500,
                              ),
                            ),
                          ]),
                        ),
                      ],
                    )
                  ],
                ),
              ),
              SizedBox(height: AdapterUtils.getHeight(10)),
              Container(
                color: Colors.white,
                padding: EdgeInsets.all(AdapterUtils.getWidth(15)),
                width: AdapterUtils.screenWidth(),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text('订单发布方',
                        style: TextStyle(
                            color: Color(0xff141F33),
                            fontWeight: FontWeight.bold,
                            fontSize: AdapterUtils.getSp(18))),
                    SizedBox(
                      height: AdapterUtils.getHeight(22),
                    ),
                    Container(
                      child: Row(
                        children: <Widget>[
                          FLAvatar(
                            image: Image.network(viewModel.model.uhead),
                            width: AdapterUtils.getWidth(50),
                            height: AdapterUtils.getHeight(50),
                          ),
                          SizedBox(width: AdapterUtils.getWidth(16)),
                          Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: <Widget>[
                              Text(viewModel.model.uname,
                                  style: TextStyle(
                                      color: Color(0xff3B4859),
                                      fontWeight: FontWeight.bold,
                                      fontSize: AdapterUtils.getSp(15))),
                              Text(viewModel.model.comName,
                                  style: TextStyle(
                                      color: Color(0xff99A2AD),
                                      fontWeight: FontWeight.w500,
                                      fontSize: AdapterUtils.getSp(12))),
                            ],
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
              SizedBox(height: AdapterUtils.getHeight(10)),
              Container(
                color: Colors.white,
                padding: EdgeInsets.all(AdapterUtils.getWidth(15)),
                width: AdapterUtils.screenWidth(),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text('工艺要求',
                        style: TextStyle(
                            color: Color(0xff141F33),
                            fontWeight: FontWeight.bold,
                            fontSize: AdapterUtils.getSp(18))),
                    SizedBox(
                      height: AdapterUtils.getHeight(22),
                    ),
                    Container(
                      height: viewModel.webViewHeight,
                      child: FaiWebViewWidget(
                        //webview 加载网页链接
                        htmlData: viewModel.model.craft,
                        //webview 加载信息回调
                        callback: viewModel.callBack,
                        //输出日志
                        isLog: false,
                      ),
                    )
                  ],
                ),
              ),
              SizedBox(height: AdapterUtils.getHeight(10)),
              Container(
                color: Colors.white,
                padding: EdgeInsets.all(AdapterUtils.getWidth(15)),
                width: AdapterUtils.screenWidth(),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text('评论',
                        style: TextStyle(
                            color: Color(0xff141F33),
                            fontWeight: FontWeight.bold,
                            fontSize: AdapterUtils.getSp(18))),
                    SizedBox(
                      height: AdapterUtils.getHeight(22),
                    ),
                    Center(
                      child: EmptyWidget(
                        emptyText: '暂无评论哦~',
                      ),
                    )
                  ],
                ),
              ),
            ],
          ),
        ),
        viewModel.isExpanded
            ? Positioned(
                child: AnimatedContainer(
                duration: Duration(seconds: 2),
                color: Color(0xffF5F5F5),
                curve: Curves.bounceOut,
                child: Offstage(
                  offstage: !viewModel.isExpanded,
                  child: TabBar(
                    tabs: [
                      Tab(
                        text: '主页',
                      ),
                      Tab(
                        text: '发布方',
                      ),
                      Tab(
                        text: '工艺要求',
                      ),
                      Tab(
                        text: '评论',
                      ),
                    ],
                    controller: controller,

                    //配置控制器
                    isScrollable: false,
                    indicatorColor: Color(0xff99A2AD),
                    indicatorWeight: AdapterUtils.getHeight(4),
                    indicatorSize: TabBarIndicatorSize.label,
                    indicatorPadding:
                        EdgeInsets.only(bottom: AdapterUtils.getHeight(10)),
                    indicator: MyUnderlineTabIndicator(
                        borderSide: BorderSide(
                          width: 4.0,
                          color: Color(0xff99A2AD),
                        ),
                        wantWidth: AdapterUtils.getWidth(12),
                        bottom: 10.0),
                    labelColor: Color(0xff3B4859),
                    labelStyle: TextStyle(
                      fontSize: AdapterUtils.getSp(16),
                      fontWeight: FontWeight.bold,
                    ),
                    unselectedLabelColor: Color(0xff606B79),
                    unselectedLabelStyle: TextStyle(
                      fontSize: AdapterUtils.getSp(16),
                      fontWeight: FontWeight.w500,
                    ),
                    onTap: (int index) {
                      viewModel.didTabIndex(index);
                    },
                  ),
                ),
              ))
            : Positioned(
                child: AnimatedContainer(
                duration: Duration(seconds: 2),
                margin:
                    EdgeInsets.symmetric(horizontal: AdapterUtils.getWidth(15)),
                curve: Curves.bounceOut,
                padding: EdgeInsets.only(top: AdapterUtils.getHeight(50)),
                child: Row(
                  children: <Widget>[
                    InkWell(
                      onTap: () {
                        Routes.goBack(context);
                      },
                      child: Image.asset(
                          AssetsUtils.getAssetsImagesPath('back_grey.png')),
                    ),
                    Spacer(),
                    InkWell(
                      child: Image.asset(
                          AssetsUtils.getAssetsImagesPath('zhuanfa.png')),
                    ),
                  ],
                ),
              )),
      viewModel.model.ispop==1?  Positioned(
          top: AdapterUtils.getHeight(100),
          right: 0,
          left: 0,
            child: Container(
          color: Color(0xff2C98FB).withOpacity(0.7),
          child: Row(
            children: <Widget>[
              SizedBox(width: AdapterUtils.getWidth(15),),
              Text('您当前进入的是抢单页面，需要支付保证金抢单',
                  style: TextStyle(
                      color: Colors.white,
                      fontWeight: FontWeight.w500,
                      fontSize: AdapterUtils.getSp(13))),
              Spacer(),
              Container(
                  child: IconButton(
                      icon: Icon(Icons.close, color: Colors.white),
                      onPressed: (){
                        viewModel.hideDisplayBar();
                      }))
            ],
          ),
        )):Container()
      ],
    );
  }

  List<Widget> _buildPaginationWidget(
      OrderDetailViewModel viewModel, int index) {
    List<Widget> lists = List<Widget>();
    for (int i = 0; i < viewModel.model.imgs.length; i++) {
      lists.add(index == i
          ? Align(
              alignment: Alignment.bottomCenter,
              child: Container(
                width: AdapterUtils.getWidth(18),
                height: AdapterUtils.getHeight(6),
                margin: EdgeInsets.only(
                    bottom: AdapterUtils.getHeight(17),
                    right: AdapterUtils.getWidth(7)),
                decoration: BoxDecoration(
                    color: Color(0xff99A2AD),
                    borderRadius: BorderRadius.all(Radius.circular(3))),
              ))
          : Align(
              alignment: Alignment.bottomCenter,
              child: Container(
                width: AdapterUtils.getWidth(6),
                height: AdapterUtils.getHeight(6),
                margin: EdgeInsets.only(
                    bottom: AdapterUtils.getHeight(17),
                    right: AdapterUtils.getWidth(7)),
                decoration: BoxDecoration(
                    color: Color(0xffD7D8DB),
                    borderRadius: BorderRadius.all(Radius.circular(3))),
              )));
    }
    return lists;
  }
}
